<!-- CertificateList 培训列表 -->
<template>
  <div class="content">
    <div class="content-container">
      <div class="content-btn">
        <Cbutton @click="handleAdd">添加培训</Cbutton>
      </div>
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column label="培训名称" prop="title" align="center" min-width="200"></el-table-column>
        <el-table-column prop="pic" label="封面" align="center" min-width="200">
          <template slot-scope="scope">
            <el-image style="width: auto;height: 90px;" :src="scope.row.pic" :preview-src-list="scope.row.pic ? [scope.row.pic] : []">
              <div slot="error" class="image-slot" style="margin-top:25px;">
                <i class="el-icon-picture-outline"></i> <br />
                加载失败
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="达标分值" prop="passedScore" align="center" min-width="80">
          <template slot-scope="scope">{{'>=' + scope.row.passedScore}}</template>
        </el-table-column>
        <el-table-column label="报考费用(元）" prop="price" align="center" min-width="120"></el-table-column>
        <el-table-column label="可考次数" prop="chance" align="center" min-width="80"></el-table-column>
        <el-table-column label="可免费考试次数" prop="freeTimes" align="center" min-width="120"></el-table-column>
        <el-table-column label="学习截止周期(时)" prop="learningHours" align="center" min-width="130"></el-table-column>
        <el-table-column label="考试用时(秒)" prop="useTime" align="center" min-width="100"></el-table-column>
        <el-table-column label="报考数" prop="signUpCount" align="center" min-width="80"></el-table-column>
        <el-table-column label="通过数" prop="maxScore" align="center" min-width="140">
          <template slot-scope="scope">
            <div style="text-align:left;">通过数：{{scope.row.passedCount || '0'}}</div>
            <div style="text-align:left;">通过率：{{handlePassingRate(scope.row)}}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="题目数" prop="topicCount" align="center" min-width="80"></el-table-column> -->
        <!-- <el-table-column label="题目总分" prop="topicScore" align="center" min-width="80"></el-table-column> -->
        <el-table-column prop="createTime" label="创建时间" align="center" min-width="160">
          <template slot-scope="scope">
            {{scope.row.createTime | glbTimeFormat}}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" align="center">
          <template slot-scope="scope">
            {{dealStr(scope.row.status, 'certificateStatusList')}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" min-width="100">
          <template slot-scope="prop">
            <el-button type="text" size="medium" @click="handleUpdate(prop.row)">编辑</el-button>
            <el-button type="text" size="medium" style="color: #F56C6C;" @click="handleRemove(prop.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
      </Pagination>
    </div>
  </div>
</template>

<script>
import { GetCertificateList, RemoveCertificate } from '@/api/train'
import { ExportList, ExportStr } from '@/utils'
export default {
  name: 'CertificateList',
  components: {},
  data () {
    return {
      query: {
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableLoading: false,
      statusList: ExportList('certificateStatusList')
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    handleAdd () {
      this.$router.push({ name: 'train:certificate:add' })
    },
    handleUpdate (row) {
      this.$router.push({ name: 'train:certificate:edit', query: { id: row.id } })
    },
    handleRemove (row) {
      this.$confirm(`确定要删除该培训吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let parmas = { id: row.id }
        RemoveCertificate(parmas).then(res => {
          this.$message.success(res.message || '删除成功')
          this.getList()
        }).catch(() => { })
      }).catch(() => { })
    },
    getList () {
      let params = JSON.parse(JSON.stringify(this.query))
      this.tableLoading = true
      GetCertificateList(params).then(res => {
        this.tableLoading = false
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
      }).catch(e => {
        this.tableLoading = false
      })
    },
    handlePassingRate (row) {
      let str = ''
      if (!row.passedCount || !row.signUpCount) {
        str = '0.00%'
      } else {
        const rate = (row.passedCount / row.signUpCount * 100).toFixed(2)
        str = rate + '%'
      }
      return str
    },
    dealStr (value, arrayKey) {
      const str = ExportStr(value, arrayKey)
      return str
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }

  }
}

</script>
<style lang='scss' scoped>
</style>
